<nz-table
  nzShowPagination
  nzTableLayout="fixed"
  [nzFrontPagination]="false"
  [nzSize]="tableSize"
  [nzOuterBordered]="true"
  nzShowSizeChanger
  [nzBordered]="true"
  [nzVirtualForTrackBy]="trackById"
  [nzData]="_dataList"
  [nzTotal]="_tableConfig!.total"
  [nzPageIndex]="_tableConfig.pageIndex"
  [nzScroll]="_scrollConfig"
  [nzPageSize]="_tableConfig.pageSize"
  (nzQueryParams)="onQueryParamsChange($event)"
  (nzPageSizeChange)="onPageSizeChange($event)"
  [nzLoading]="_tableConfig.loading"
  nzShowQuickJumper
  [nzShowTotal]="rangeTemplate"
>
  <ng-template #rangeTemplate let-range="range" let-total> {{ range[0] }}-{{ range[1] }} 共 {{ total }} 条</ng-template>
  <thead>
  <tr>
    <th class="animate-bg-0" [nzLeft]="true" [nzIndeterminate]="indeterminate" *ngIf="_tableConfig.showCheckbox"
        (nzCheckedChange)="onAllChecked($event)" [nzWidth]="'40px'" [nzChecked]="allChecked"></th>
    <ng-container *ngFor="let head of _tableConfig.headers;let headIndex=index;let last=last;let first=first;">
      <th class="animate-bg-0"
          [ngClass]="[(head.thClassList?head.thClassList:[]),head.thClassFn?head.thClassFn(head):''].flat()"
          [nzWidth]="head.width + 'px'"
          nz-resizable
          nzPreview
          nzBounds="parent"
          [nzMaxWidth]="1200"
          [nzMinWidth]="1"
          (nzResizeEnd)="onResize($event, head.title)"
          [nzRight]="(!!head.fixed&&head.fixedDir==='right')"
          [nzLeft]="(!!head.fixed&&head.fixedDir==='left')"
          *ngIf="(head.show===undefined||head.show===true)">
        <nz-resize-handle *ngIf="!last&&(_tableConfig.showCheckbox?true:!last)" nzDirection="right">
          <div class="resize-trigger"></div>
        </nz-resize-handle>
        <div>
          {{head.title}}
          <div class="sort-wrap m-l-8 hand-model" (click)="changeSort(head)" *ngIf="head.showSort">
            <i class="sort-caret ascending" [class.sort-caret-sel-asc]="head.sortDir==='asc'"></i>
            <i class="sort-caret descending" [class.sort-caret-sel-desc]="head.sortDir==='desc'"></i>
          </div>
        </div>

      </th>
    </ng-container>

  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let row of _dataList;let rowIndex=index;trackBy:trackByTableBody">
    <td class="animate-bg-0" nzEllipsis *ngIf="_tableConfig.showCheckbox" [nzLeft]="true"
        (nzCheckedChange)="checkRowSingle($event,rowIndex)"
        [nzChecked]="row['_checked']"></td>
    <ng-container *ngFor="let head of _tableConfig.headers">
      <td *ngIf="(head.show===undefined||head.show===true)"
          [ngClass]="[(head.tdClassList?head.tdClassList:[]),head.tdClassFn?head.tdClassFn(row,rowIndex):''].flat()"
          [nzEllipsis]="!head.notNeedEllipsis"
          [nzLeft]="(!!head.fixed&&head.fixedDir==='left')"
          [nzRight]="(!!head.fixed&&head.fixedDir==='right')">
        <ng-container *ngIf="head.tdTemplate;else rowTpl">
          <ng-container *ngTemplateOutlet="head.tdTemplate;context:row"></ng-container>
        </ng-container>
        <ng-template #rowTpl>
          <ng-container *ngIf="head.pipe;else noPipe">
            <span [title]="(row|tableFiledPipe:head.field|map:head.pipe)">{{row|tableFiledPipe:head.field|map:head.pipe}}</span>
          </ng-container>
          <ng-template #noPipe>
            <ng-container><span [title]="row|tableFiledPipe:head.field">{{row|tableFiledPipe:head.field}}</span></ng-container>
          </ng-template>
        </ng-template>
      </td>
    </ng-container>

  </tr>
  </tbody>
</nz-table>
